<template>
  <div class="MyVanCell">
    <van-cell v-for="(item, index) in list" :key="index">
      <div class="item" v-if="item.cover.type === 0">
        <h3 class="van-multi-ellipsis--l2" @click="doClick(item.art_id)">
          {{ item.title }}
        </h3>
        <ul class="itemList">
          <li class="top" v-if="index < 3">置顶</li>
          <li class="name">{{ item.aut_name }}</li>
          <li class="comment">{{ item.comm_count }}评论</li>
          <li class="date">{{ item.pubdate | format }}</li>
        </ul>
        <i
          class="iconfont icon-close-bold"
          @click="feed(item.aut_id, item.art_id, index)"
        ></i>
      </div>
      <div class="item1" v-else-if="item.cover.type === 1">
        <div class="left">
          <h3 class="van-multi-ellipsis--l2" @click="doClick(item.art_id)">
            {{ item.title }}
          </h3>
          <ul class="itemList">
            <li class="top" v-if="index < 3">置顶</li>
            <li class="name">{{ item.aut_name }}</li>
            <li class="comment">{{ item.comm_count }}评论</li>
            <li class="date">{{ item.pubdate | format }}</li>
          </ul>
        </div>
        <div class="rigin">
          <img class="img" :src="item.cover.images[0]" alt="" />
        </div>
        <i
          class="iconfont icon-close-bold"
          @click="feed(item.aut_id, item.art_id, index)"
        ></i>
      </div>
      <div class="item2" v-else>
        <div class="top">
          <h3 class="van-multi-ellipsis--l2" @click="doClick(item.art_id)">
            {{ item.title }}
          </h3>
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              v-for="(ele, index2) in item.cover.images"
              :key="index2"
            >
              <van-image :src="ele" />
            </van-grid-item>
          </van-grid>
        </div>
        <div class="bottom">
          <ul class="itemList">
            <li class="top" v-if="index < 3">置顶</li>
            <li class="name">{{ item.aut_name }}</li>
            <li class="comment">{{ item.comm_count }}评论</li>
            <li class="date">{{ item.pubdate | format }}</li>
          </ul>
        </div>
        <i
          class="iconfont icon-close-bold"
          @click="feed(item.aut_id, item.art_id, index)"
        ></i>
      </div>
    </van-cell>
    <!-- 弹出框 -->
  </div>
</template>

<script>
export default {
  name: 'MyVanCell',
  props: ['list', 'dialog'],
  data () {
    return {
      show: false,
      autId: '', // 作者ID
      artId: '', // 文章ID
      indexText: '' // 文章索引
    }
  },
  methods: {
    // 点击文章反馈
    feed (autId, artId, indexText) {
      this.dialog()
      this.autId = autId
      this.indexText = indexText
      this.artId = artId
      // console.log(artId)
    },
    doClick (id) {
      this.$router.push('/home/question/questionInfo/' + id)
      console.log(id)
    }
  }
}
</script>

<style lang="less" scoped>
.MyVanCell {
  .van-cell {
    padding: 0;
    margin-bottom: 15px;

    .item {
      position: relative;
      i {
        position: absolute;
        bottom: -5px;
        right: 5px;
        color: #bcbcbc;
        font-size: 12px;
      }
      .itemList {
        display: flex;
        padding-top: 20px;
        li {
          color: #b4b4b4;
          font-size: 12px;
          margin-right: 10px;
        }
        .top {
          color: #e22829;
        }
      }
    }
    .item1 {
      display: flex;
      padding-right: 5px;
      position: relative;
      i {
        position: absolute;
        bottom: 0px;
        right: 130px;
        color: #bcbcbc;
        font-size: 12px;
      }
      .left {
        flex: 1;
        h3 {
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #3a3a3a;
        }
        .itemList {
          display: flex;
          padding-top: 30px;
          li {
            color: #b4b4b4;
            font-size: 12px;
            margin-right: 10px;
          }
          .top {
            color: #e22829;
          }
        }
      }
      .rigin {
        .img {
          width: 120px;
          height: 90px;
          vertical-align: middle;
        }
      }
    }
    .item2 {
      position: relative;
      i {
        position: absolute;
        bottom: -5px;
        right: 5px;
        color: #bcbcbc;
        font-size: 12px;
      }
      .top {
        h3 {
          font-family: MicrosoftYaHei;
          font-size: 16px;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 1px;
          color: #3a3a3a;
        }
      }
      .bottom {
        .itemList {
          display: flex;
          padding-top: 20px;
          li {
            color: #b4b4b4;
            font-size: 12px;
            margin-right: 10px;
          }
          .top {
            color: #e22829;
          }
        }
      }
    }
  }
}
</style>
